
let index = layer.load(0, { shade: [0.3, '#ccc'] });

let id = sessionStorage.getItem('goodsId');
console.log(id)
if (!id && !/^\d+$/.test(id)) {
    layer.msg('非法请求');// 弹窗提示,然后跳转
    location.href = 'index.html';
  }

  // 根据商品id获取商品详情并渲染
$.ajax({
    url: '../server/detail.php',
    data: { id },
    dataType: 'json',
    success(res) {
      let { meta: { status }, data } = res;
      // 判断请求数据是否成功
      if (status == '1') {
        layer.msg('非法请求');// 
        location.href = 'list.html';
      } else {
        // 数据请求成功.,将数据渲染
        let pic = data.imgpath.split('==========')[0];
        $('.middle>img').attr('src', pic); // 渲染中图
        $('.big>img').attr('src', pic); // 渲染中大图
        let pics = data.imgpath.split('==========');
        // 遍历图片数据并组装html字符串然后渲染
        $('.small>.wraper>ul').html(pics.map(v => `<li><img src=${v} /></li>`).join(''));
        // 调用放大镜函数
        enlarge();
        // 将商品库存渲染到id="num"的输入框中
        $('#num').attr('stock', data.stock);
        //渲染标题和价格及详情
        $(".mianbao>.sj>a").text(data.name)
        $('.description>h4').text(data.name);
        $('.introduce').text(data.introduce);
        $('.pic .souceprice>span').text(data.price);
  
        // $('.details .tab>ol>li').first().html(data.introduce);
        // 如果有商品详情则渲染商品详情,没有则渲染商品介绍
        if(data.detail){
          $('.details .tab>ol>li').first().html(data.detail.split('==========')[0]);
          $('.details .tab>ol>li').first().next().html(data.detail.split('==========')[2])
          $('.details .tab>ol>li').first().next().next().html(data.detail.split('==========')[1])
        }
        layer.close(index);
      }
    }
  })


  // 点击购买商品数量的累加
$('.add').click(function () {
  // 只要点击了加的按钮,就解除键按钮的禁用
  $(this).next().prop('disabled', false);
  // 获取到商品的库存
  let stock = $(this).prev().attr('stock') - 0;// -0减值转为数值
  // 获取输入框中的值
  let n = $(this).prev().val() - 0;
  n++;
  if (n >= stock) {
    $(this).prop('disabled', true);// 禁用点击按钮
    // 将最大库存渲染到输入框
    $(this).prev().val(stock);
  }
  $(this).prev().val(n);
})
// 点击购买商品数量的递减
$('.reduce').click(function () {
  // 只要点击了减的按钮,就解除加按钮的禁用
  $(this).prev().prop('disabled', false);
  // 获取到商品的库存
  let stock = $(this).prev().prev().attr('stock') - 0;// -0减值转为数值
  // 获取输入框中的值
  let n = $(this).prev().prev().val() - 0;
  n--;
  if (n <= 1) {
    $(this).prop('disabled', true);// 禁用点击按钮
    // 将最小购买数渲染到输入框
    $(this).prev().prev().val(stock);
  }
  $(this).prev().prev().val(n);
})
// 点击进入购物车
$('.toCart').click(function () {
  // 通过cookie获取用户名
  let username = getCookie('username');
  // 判断用户是否登录
  if (!username) {
    layer.msg('请先登录');
    location.href = 'longin.html';
    return false;
  }
  // 已经登录则跳转至购物车页面
  location.href = 'cart.html';
  return false;
})
// 点击加入购物车
$('.addBtn').click(function () {
  // 通过cookie获取用户名
  let username = getCookie('username');
  // 判断用户是否登录
  if (!username) {
    layer.msg('请先登录');
    location.href = 'longin.html';
    return;
  }
  // 用户已经登录则加入购物车
  // 获取库存
  let stock = $('#num').attr('stock') - 0;
  // 获取本次购买数量
  let num = $('#num').val() - 0;
  // 组装加入购物车的数据
  let cartObj = { username, id, num };

  // 获取本地购物车数据
  let str = localStorage.getItem('goodsData');
  // 购物车数组
  let arr;
  if (!str) { // 之前购物车为空
    arr = [cartObj];
  } else {
    // 判断用户之前是够添加过此商品的购物车
    let cartArr = JSON.parse(str);
    let cart = cartArr.find(v => {
      return v.id === id && v.username === username;
    });
    if (!cart) { // 之前没有添加过次购物车
      cartArr.push(cartObj);
      arr = cartArr;
      layer.msg('加入购物车成功');
    } else {
      let n1 = cart.num - 0; // 之前添加购物车的数量
      let n2 = n1 + num;
      if (n2 > stock) { // 添加的商品数超过库存
        layer.msg('购物数量超过库存');
        n2 = stock;
      } else {
        layer.msg('加入购物车成功');
      }
      // 将购买数累加并赋值给对象cart的num属性
      cart.num = n2;
      arr = cartArr
    }
  }
  // 将购物车数据arr写到localStorage中
  localStorage.setItem('goodsData', JSON.stringify(arr));

})

// 购买商品的输入框失去焦点事件
$('#num').blur(function () {
  // 获取输入的内容
  let val = $(this).val();
  if(!/^\d+$/.test(val)){ // 校验只能为数字
    layer.msg('请输入购买数');
    $(this).val(1);
    return;
  }
  // 获取库存
  let stock = $(this).attr('stock');
  if(val<1 || val>stock){
    layer.msg('购买数超出库存');
    $(this).val(1);
    return;
  }
})